<template>
  <section>
    <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
    >
      <div class="detail-form-list-div"  v-for="(item, index) in dataType" :key="index">
        <div class="detail-form-list-title">
          <div>
            <img src="../../../../assets/alarm-clock.png" class="alarm-clock"/>
            {{item.updateTime | format}}
            <img src="../../../../assets/icon-tel.png" class="icon-tel"/>
          </div>
          <div class="detail-form-list-icon" @click="showChange2(index)">
            <img src="../../../../assets/icon-bottom.png"  class="detail-icon-bottom"/>
          </div>
        </div>
        <div class="detail-form-list-msg" v-show="index == tabIdx">
          <div class="detail-form-list-msg-line">
            <div class="detail-form-list-msg-lable">操作</div>
            <div class="detail-form-list-msg-name">{{item.operationName}}</div>
          </div>
          <div class="detail-form-list-msg-line">
            <div class="detail-form-list-msg-lable">备注</div>
            <div class="detail-form-list-msg-input">{{item.remark}}</div>
          </div>
          <div class="detail-form-tipscon">
            <div class="detail-form-tips-con">操作人:{{item.createUserName}}</div>
            <div class="detail-form-tips-con">报表来源:来源<span v-if="item.source == 0">移动端</span><span v-else>pc端</span></div>
          </div>
        </div>

        <div class="detail-form-tips"  v-show="index != tabIdx">
          操作人
          <span class="detail-form-tips-span">{{item.createUserName}}</span>
        </div>
      </div>
    </van-list>
  </section>
</template>

<script>
import { getDate } from '../../../../api/unit.js'
export default {
  props: {
    dataType: Array,
    tabIdx: Number,
    pageCount: Number,
    pageSize: Number
  },
  data () {
    return {
      loading: false,
      finished: false
    }
  },
  filters: {
    format: function (value) {
      return getDate(value).nTime
    }
  },
  methods: {
    onLoad: function () {
      setTimeout(() => {
        if (this.dataType.length < this.pageCount && this.pageCount > this.pageSize) {
          this.pageChange()
        }
        // 加载状态结束
        this.loading = false

        // 数据全部加载完成
        if (this.dataType.length >= this.pageCount) {
          this.finished = true
        }
      })
    },
    showChange2 (index) {
      this.$emit('showChange', index)
    },
    pageChange () {
      this.$emit('pageChange')
    }
  }
}
</script>

<style scoped>
.detail-form-list-div{
  width:598px;
  background:#fff;
  box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  border-radius:20px;
  padding: 41px 55px 35px 37px;
  margin-top: 28px;
}
.detail-form-list-title{
  font-size: 32px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 34px;
}
.detail-form-list-icon{
  width:21px;
  height:11px;
  /* background: #9e9e9e; */
}
.detail-icon-bottom{
  width:21px;
  height:11px;
}
.detail-form-list-msg-input{
  width: 484px;
  padding: 0 16px;
  line-height: 54px;
  height: 110px;
  background: #f7f7f7;
}
.detail-form-tips-con{
  width: 300px;
}
.detail-form-tipscon{
  display: flex;
  font-size: 26px;
  color: #9e9e9e;
  margin-top: 30px;
}
.detail-form-list-msg{
  font-size: 26px;
  color: #9e9e9e;
  margin-top: 16px;
  /* border-top: 1px solid #f7f7f7;
  padding-top: 32px;
  margin-top: 39px; */
}
.detail-form-list-msg-title{
  line-height: 54px;
  background-color: #f7f7f7;
  font-size: 26px;
  color: #9E9E9E;
  text-align: center;
  margin-top: 16px;
}
.detail-form-list-msg-con{
  margin-top: 19px;
  text-align: center;
}
.detail-true{
  width:20px;
  height:20px;
  background: #0FBD9D;
  border-radius:50%;
  margin: 0 auto;
}
.detail-false{
  width:20px;
  height:20px;
  background: #FF8D17;
  border-radius:50%;
  margin: 0 auto;
}
.detail-boolen{
  width:20px;
  height:20px;
  border:2px solid rgba(229,229,229,1);
  border-radius:50%;
  margin: 0 auto;
}
.detail-form-list-msg-type{
  font-size: 30px;
  font-weight: bold;
  color: #202020;
}
.detail-form-list-msg-line{
  display: flex;
  align-items: baseline ;
 margin-bottom: 32px;
  /* margin-top: 34px; */
}
.detail-form-list-msg-lable{
  font-weight: bold;
  color: #202020;
  font-size: 30px;
  width: 123px;
}
.detail-form-list-msg-lable-t{
  font-weight: bold;
  font-size: 30px;
  color: #202020;
}
.detail-form-list-msg-name{
  height:54px;
  line-height: 54px;
  background: #f7f7f7;
  font-size: 25px;
  width: 478px;
  padding: 0 20px;
  margin-left: 24px;
}
.detail-form-list-msg-tips{
  width: 73px;
  height: 54px;
  text-align: center;
  line-height: 54px;
  background: #f7f7f7;
  margin-left: 19px;
}
.detail-form-list-msg-input{
  background: #f7f7f7;
  border:0px solid #f7f7f7;
}
.detail-form-tips{
  color: #9e9e9e;
  width: 548px;
  font-size: 26px;
  margin-left: 24px;
  margin-top: 34px;
 overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  height: 48px;
  flex-wrap: nowrap;
}
.detail-form-tips-span{

  border-radius:6px;
  padding: 7px 10px;
  border: 2px solid #9e9e9e;
  margin-left: 12px;
  margin-bottom: 5px;
}
.alarm-clock{
  width: 35px;
  height: 35px;
}
.icon-tel{
  width:14px;
  height:20px;
}
</style>
